<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head>
<meta charset="UTF-8">
<title>商品管理</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
	<meta name="apple-mobile-web-app-status-bar-style" content="black">
	<meta name="apple-mobile-web-app-capable" content="yes">
	<meta name="format-detection" content="telephone=no">
	<link rel="icon" href="/resources/favicon.ico">
	<link rel="stylesheet" href="/resources/layui/css/layui.css" media="all" />
	<link rel="stylesheet" href="/resources/css/public.css" media="all" />
	<link rel="stylesheet" href="/resources/layui_ext/dtree/dtree.css">
    <link rel="stylesheet" href="/resources/layui_ext/dtree/font/dtreefont.css">
</head>
<body class="childrenBody">
	<blockquote class="layui-elem-quote quoteBox">
		<form class="layui-form" method="post" id="searchForm">
			<div class="layui-form-item" style="text-align: center;">
			    <div class="layui-inline">
			      <label class="layui-form-label">供应商:</label>
			      <div class="layui-input-inline">
			      	<select id="searchProvider" name="providerid">
			      		<option value="">请选择供应商</option>
			      	</select>
			      </div>
			    </div>
			    <div class="layui-inline">
			      <label class="layui-form-label">商品名称:</label>
			      <div class="layui-input-inline">
			        <select id="searchGoods" name="goodsid">
			        		<option value="">请选择商品名称</option>
			        	</select>

			      </div>
			    </div>
			   <div class="layui-inline">
			      <label class="layui-form-label">开始时间:</label>
			      <div class="layui-input-inline">
			        <input type="text" name="startTime" placeholder="请选择开始时间" id="startTime" readonly="readonly"  autocomplete="off" class="layui-input">
			      </div>
			    </div>
			    <div class="layui-inline">
			      <label class="layui-form-label">结束时间:</label>
			      <div class="layui-input-inline">
			        <input type="text" name="endTime" placeholder="请选择结束时间" id="endTime" readonly="readonly"  autocomplete="off" class="layui-input">
			      </div>
			    </div>
		   </div>
		 	 <div class="layui-form-item" style="text-align: center;">
		      <button type="button" class="layui-btn" lay-submit="" id="doSearch" lay-filter="doSearch"><span class="layui-icon layui-icon-search"></span>查询</button>
      		  <button type="reset" class="layui-btn layui-btn-warm"><span class="layui-icon layui-icon-refresh-1"></span>重置</button>
		 	 </div>
		</form>
	</blockquote>
	
	<table id="inportTable" class="layui-table" lay-filter="inportTable"></table>
	
	<!--表头-->
	<div id="inportTableToolBar" style="display: none;">
		<a class="layui-btn layui-btn-sm" lay-event="add"><span class="layui-icon">&#xe61f;</span>添加商品</a>
	</div>
	<!--操作-->
	<div type="text/html" id="inportTableRowBar"  style="display: none;">
		<a class="layui-btn layui-btn-xs" lay-event="update"><span class="layui-icon">&#xe642;</span>更新</a>
		<a class="layui-btn layui-btn-xs layui-btn-danger" lay-event="del"><span class="layui-icon">&#xe640;</span>删除</a>
		<a class="layui-btn layui-btn-xs layui-btn-danger" lay-event="outport"><span class="layui-icon">&#xe640;</span>退货</a>
	</div>
	
	<!-- 修改和添加弹出层开始 -->
	<div style="display: none;padding: 3px" id="saveOrUpdateDiv">
		<form id="dataForm" lay-filter="dataForm" class="layui-form layui-form-pane">
			<div class="layui-form-item" >
			    <div class="layui-inline">
			      <label class="layui-form-label">供应商:</label>
			      <div class="layui-input-inline">
			      	<input type="hidden" name="id">
			      	<select id="providerid" name="providerid" lay-filter="providerid">
			      		<option value="">请选择供应商</option>
			      	</select>
			      </div>
			    </div>
			    <div class="layui-inline">
			      <label class="layui-form-label">商品名称:</label>
			      <div class="layui-input-inline">
			        <select id="goodsid" name="goodsid">
			        		<option value="">请选择商品名称</option>
			        	</select>

			      </div>
			    </div>
		   </div>
		   <div class="layui-form-item" >
			    <div class="layui-inline">
			      <label class="layui-form-label">进货数量:</label>
			      <div class="layui-input-inline">
					<input type="text" name="number"  placeholder="请输入进货数量" autocomplete="off" class="layui-input">
			      </div>
			    </div>
			    <div class="layui-inline">
			      <label class="layui-form-label">进货价格:</label>
			      <div class="layui-input-inline">
					<input type="text" name="inportprice"  placeholder="请输入进货价格" autocomplete="off" class="layui-input">
			      </div>
			    </div>
		   </div>
		   <div class="layui-form-item" >
			    <label class="layui-form-label">支付类型</label>
			    <div class="layui-input-block">
			      <input type="radio" name="paytype" value="微信" title="微信" checked="">
			      <input type="radio" name="paytype" value="支付宝" title="支付宝">
			      <input type="radio" name="paytype" value="银联" title="银联" >
			    </div>
		   </div>
		   <div class="layui-form-item" style="text-align: center;">
			    <label class="layui-form-label">备注</label>
			    <div class="layui-input-block">
			      <textarea placeholder="请输入内容"  name="remark" class="layui-textarea"></textarea>
			    </div>
		   </div>
		   <div class="layui-form-item" style="text-align: center;">
			   <div class="layui-inline">
			       <button type="button" class="layui-btn" lay-filter="doSubmit" lay-submit=""><span class='layui-icon'>&#xe609;</span>提交</button>
		          <button type="reset" class="layui-btn layui-btn-danger"><span class='layui-icon'>&#xe669;</span>重置</button>
			   </div>
		   </div>
		</form>
	</div>
	<!-- 修改和添加弹出层结束 -->
	
	<!-- 退货的弹出层开始 -->
	<div style="display: none;padding: 3px" id="outportDiv">
		<form id="outportFrm" lay-filter="outportFrm" class="layui-form layui-form-pane">
			<div class="layui-form-item" >
			      <label class="layui-form-label">退货数量:</label>
			      <div class="layui-input-block">
			      	<!-- 提交后台 -->
			      	<input type="hidden" name="inportid">
			      	<!-- 用来检查输入的数量是否合法 -->
			      	<input type="hidden" name="currentNumber" id="currentNumber">
			      	<input type="text" class="layui-input" name="number" lay-verify="required|checknumber" placeholder="请输入商品进货数量 ">
			      </div>
		   </div>
		   <div class="layui-form-item" >
			      <label class="layui-form-label">退货备注:</label>
			      <div class="layui-input-block">
					<textarea placeholder="请输入内容"  name="remark" class="layui-textarea"></textarea>
			      </div>
		   </div>
		   <div class="layui-form-item" style="text-align: center;">
			   <div class="layui-inline">
			       <button type="button" class="layui-btn" lay-filter="doOutportSubmit" lay-submit=""><span class='layui-icon'>&#xe609;</span>提交</button>
		          <button type="reset" class="layui-btn layui-btn-danger"><span class='layui-icon'>&#xe669;</span>重置</button>
			   </div>
		   </div>
		</form>
	</div>
	<!-- 退货的弹出层结束 -->
	
	
	<script type="text/javascript" src="/resources/layui/layui.js"></script>
	<script type="text/javascript">
	var tableIns;
	var $;
	layui.use(['layer','jquery','table','form','laydate'],function(){
		  var layer = layui.layer;
		  $ = layui.jquery;
		  var table = layui.table;
		  var form = layui.form;
		  var laydate = layui.laydate;
		  
			//渲染时间选择器
			laydate.render({
				elem:'#startTime',
				type:'datetime'
			});
			laydate.render({
				elem:'#endTime',
				type:'datetime'
			});
		  
		  //加载查询条件的供养商的下拉列表
		  $.post("/provider/loadAllAvailableProvider",function(data){
			  var searchProvider = $("#searchProvider");
			  var html = '<option value="">请选择供应商</option>';
			  $.each(data.data,function(i,item){
				  html+='<option value="'+item.id+'">'+item.providername+'</option>'
			  });
			  searchProvider.html(html); 
			  form.render();
		  });
		  
		  //加载查询条件的商品的下拉列表
		  $.post("/goods/loadAllAvailableGoods",function(data){
			  var searchGoods = $("#searchGoods");
			  var html='<option value="">请选择商品</option>';
		  	  $.each(data.data,function(i,item){
		  		html+='<option value="'+item.id+'">'+item.goodsname+'</option>'
		  	  });
		  	  searchGoods.html(html);
		  	  form.render();
		  });
		  

		//渲染数据表格
			tableIns = table.render({
				elem:'#inportTable',
				url:'/inport/loadAllInport',
				toolbar:'#inportTableToolBar',//开启同工具栏
				defaultToolbar:['filter','print'],
				title: '进货数据表',
				height:'full-220',//固定高度
				cols:[ [
					{type: 'checkbox', fixed: 'left'},
					{field:'id',title:'ID',align:'center',fixed: 'left',width:'80'},
					{field:'providername',title:'供应商',align:'center',width:'150'},
					{field:'goodsname',title:'商品名称',align:'center',width:'150'},
					{field:'size',title:'商品规格',align:'center',width:'150'},
					{field:'paytype',title:'支付类型',align:'center',width:'150'},
					{field:'inporttime',title:'进货时间',align:'center',width:'150'},
					{field:'operateperson',title:'操作员',align:'center',width:'150'},
					{field:'number',title:'进货数量',align:'center',width:'150'},
					{field:'inportprice',title:'进货价格',align:'center',width:'150'},
					{field:'remark',title:'备注',align:'center',width:'150'},
					{fixed: 'right', title:'操作', toolbar: '#inportTableRowBar',align:'center',width:'250'}
				] ],
				page:true,
				done: function(res, curr, count){ //处理删除某一页最后一条数据的BUG
			        if(res.data.length==0&&curr!=1){
			        	tableIns.reload({
			        		page:{
			        			curr:(curr-1)
			        		}
			        	});
			        }
			    }
			});
		    //模糊查询
		    $("#doSearch").click(function(){
		    	var params = $("#searchForm").serialize();
		    	tableIns.reload({
		    		url:'/inport/loadAllInport?'+params,
		    	})
		    });
		    
		    //监听表头点击事件
		    table.on('toolbar(inportTable)',function(obj){
		    	switch(obj.event){
		    		case 'add':
		    			 openAddLayer();
		    			break;
		    	}
		    });
		    
		    
		    
		    var mainIndex;
		    var url;
		    //打开添加的弹出层
		    function openAddLayer(){
		    	mainIndex=layer.open({
		    		type:1,
		    		title:'添加商品进货',
		    		skin: 'layui-layer-molv', //加上边框
					area: ['800px', '400px'], //宽高
					content:$("#saveOrUpdateDiv"),
					success:function(index){
						//设置
						$("#providerid").attr("disabled",false);
						$("#goodsid").attr("disabled",false);
						$("#dataForm")[0].reset();
						url="/inport/addInport";
						 //加载查询条件的供养商的下拉列表
						  $.post("/provider/loadAllAvailableProvider",function(data){
							  var providerid = $("#providerid");
							  var html = '<option value="">请选择供应商</option>';
							  $.each(data.data,function(i,item){
								  html+='<option value="'+item.id+'">'+item.providername+'</option>'
							  });
							  providerid.html(html); 
							  form.render();
							  //监听providerid下拉框的事件
							  form.on('select(providerid)', function(data){
								  console.log(data.value); //得到被选中的值
								  var pid=data.value;
								  $.get("/goods/loadGoodsByProviderid",{providerid:pid},function(res){
									  var resData=res.data;
									  var goodsid=$("#goodsid");
									  var gHtml='<option value="">请选择商品</option>'
									  $.each(resData,function(i,item){
										  gHtml+='<option value="'+item.id+'">'+item.goodsname+"["+item.size+"]"+'</option>'
										});
									  goodsid.html(gHtml);
									  form.render();
								  })
								});    
							  
						  });
						  
					}
		    	});
		    }
		    
		    
		    //监听行点击事件
		    table.on('tool(inportTable)',function(obj){
		    	var data = obj.data;//获取当前行数据
		    	var layEvent = obj.event;//获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
		    	if(layEvent === 'update'){//修改
		    		openUpdateInportLayer(data);
		    	}else if(layEvent === 'del'){//删除
		    		deleteInport(data);
		    	}else if(layEvent === 'outport'){
		    		openOutport(data);
		    	}
		    	
		    })
		    
		    //打开退货的弹出层
		    function openOutport(data){
		    	mainIndex = layer.open({
		    		type:1,
		    		content:$("#outportDiv"),
		    		area:['800px','300px'],
		    		title:'添加商品进货',
		    		success:function(){
		    			//设置inportid和currentNumber
		    			form.val("outportFrm",{inportid:data.id,currentNumber:data.number});
		    			$("#outportFrm")[0].reset();
		    		}
		    	});
		    }
		    
		    //自定义验证规则
		    form.verify({
		    	checknumber:function(value,item){// value : 表单的值  item：表单的dom对象
		    		if(value<=0||value>parseInt($("#currentNumber").val())){
		    			return "退货数量必须是【1】-【"+$("#currentNumber").val()+"】之间";
		    		}
		    	}
		    });
		    
		    //监听退货的提交事件
		    form.on('submit(doOutportSubmit)',function(data){
		    	$.post("/outport/addOutport",data.field,function(res){
		    		if(res.code==200){
		    			tableIns.reload();
		    		}
		    		layer.msg(res.msg);
		    		layer.close(mainIndex);
		    	});
		    });
		    
		    //删除
		    function deleteInport(data){
		    	$.post("/outport/loadOutportByInportId",{inportid:data.id},function(res){
		    		if(res.data>0){
		    			layer.msg("当前进货单有退货记录，不能删除");
		    		}else{
		    			layer.confirm('真的删除【'+data.goodsname+'】进货商品么',function(index){
			    			layer.close(index);
			    			//向服务器发送删除指令
			    			$.post("/inport/deleteInport",{id:data.id},function(obj){
			    				if(obj.code == 200){
			    					tableIns.reload();//重新加载表单
			    				}
			    				layer.msg(obj.msg);
			    			});
			    		});
		    		}
		    	});
    			
		    }
		    
		    //打开修改的弹出层
		    function openUpdateInportLayer(data){
		    	mainIndex=layer.open({
		    		type:1,
		    		title:'修改商品进货',
		    		skin: 'layui-layer-molv', //加上边框
					area: ['800px', '600px'], //宽高
					content:$("#saveOrUpdateDiv"),
					success:function(index){
						url="/inport/updateInport";
						$("#dataForm")[0].reset();
						form.val("dataForm",data);
						//加载查询条件的供养商的下拉列表
						  $.post("/provider/loadAllAvailableProvider",function(obj){
							  var providerid = $("#providerid");
							  var html = '<option value="">请选择供应商</option>';
							  $.each(obj.data,function(i,item){
								  if(item.id==data.providerid){
										html+='<option value="'+item.id+'" selected=selected>'+item.providername+'</option>'
									}else{
										html+='<option value="'+item.id+'">'+item.providername+'</option>'
									}
							  });
							  providerid.html(html); 
							  form.render();
						  });
						  
						  //加载查询条件的商品的下拉列表
						  $.post("/goods/loadAllAvailableGoods",function(obj){
							  var goodsid = $("#goodsid");
							  var html='<option value="">请选择商品</option>';
						  	  $.each(obj.data,function(i,item){
						  		if(item.id==data.goodsid){
									html+='<option value="'+item.id+'" selected=selected>'+item.goodsname+'</option>'
								}else{
									html+='<option value="'+item.id+'">'+item.goodsname+'</option>'
								}
						  	  });
						  	  goodsid.html(html);
						  	  form.render();
						  });
						  
						//设置只读
						$("#providerid").attr("disabled","disabled");
						$("#goodsid").attr("disabled","disabled");

					}
		    	});
		    }
		    
		    //监听提交按钮的事件  
		    form.on("submit(doSubmit)",function(data){
		    	console.log(data.field);
		    	//提交 数据
		    	$.post(url,data.field,function(obj){
		    		if(obj.code==200){
		    			tableIns.reload();//重新加载表单
		    		}
		    		layer.msg(obj.msg);
					layer.close(mainIndex);
		    	})
		    	return false;//阻止同步提交
		    });
		    
		   
		    
	  });
	
	
	</script>
	
	
	
	
</body>
</html>